import {View, Text, Block} from '@tarojs/components';
import React, {Component} from 'react';
import {AtIcon} from 'taro-ui';
import DateTimePicker from '../DateTimePicker';
import './select-date.scss';

interface IProps {
  changeState: any
  changeEnd: any
  changeScreen?: any
  onClear?: void
  small?: boolean
  hideSleect?: boolean
  pNone?: boolean
  start?: any
  end?: any
}

export default class selectDate extends Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }

  render() {
    const props: any = this.props;
    return (
      <Block>
        <View className='vedrifcation-header'>
          <View className='col-11'>
            <DateTimePicker onOk={
              (date: any) => props.changeState(date.current)
            } pNone={props.pNone} onClear={props.onClear} value={props.start}
            />
          </View>
          <View className='col-2 t-a-c'>至</View>
          <View className='col-11'>
            <DateTimePicker onOk={
              (date: any) => props.changeEnd(date.current)
            } pNone={props.pNone} onClear={props.onClear} value={props.end}
            />
          </View>
        </View>
        {!props.hideSleect && <View className={`select ${props.small ? 'small' : ''}`}>
          <AtIcon size='12' value='icon icon-shaixuan-01' className='m-r-10' />
          <Text className='select-text' onClick={props.changeScreen}>
            筛选
          </Text>
        </View>}
      </Block>
    )
  }
}
